{extend name="layout"}
{block name="title"}登录_社优保{/block}
{block name="body"}
<div class="login-head">
	<img src="__ROOT__/static/mobile/images/login-pro.png" alt="">
</div>
<div class="login-box" data-tab="one">
	<form onsubmit="return false" onkeydown="if(event.keyCode==13)return false;" method="post" data-auto="true"
		  class="form-one" data-callback="forgetOne"
		  data-csrf="{:systoken('forgetpw')}" action="{:url('forgetpw')}" >
		<!--							<form onsubmit="return false" class="form-one"  onclick="forgetOne()">-->


			<div class="input-box">
				<span class="iconfont icon-gongsichaxun"></span>
				<input  required pattern="^[\S]{4,}$" name="name"  autocomplete="off" placeholder="请输入公司名称">

			</div>
			<button type="submit" class="btn-step" data-form-loaded="下一步">下一步</button>

	</form>
	<form onsubmit="return false" onkeydown="if(event.keyCode==13)return false;" method="post" data-auto="true"
		  class="form-two" data-callback="forgetTwo"
		  data-csrf="{:systoken('mobile/login/forgetpw_check')}"
		  action="{:url('mobile/login/forgetpw_check')}">
			<div class="input-box">
				<span class="iconfont icon-a-shoujihao1"></span>
				<input  required pattern="^[\S]{4,}$"  name="mobile" autocomplete="off" placeholder="请输入手机号">

			</div>
			<div class="input-box">
				<span class="iconfont icon-a-yanzhengma1"></span>
				<input  required pattern="^[\S]{4,}$"  name="verify" autocomplete="off" placeholder="请输入验证码">
				<p class="phone-code">获取验证码</p>
			</div>
			<button type="submit"  data-form-loaded="下一步" class="btn-step">下一步</button>
			<input type="hidden" name="mobile" id="phone">
			<input type="hidden" name="type" value="3">
	</form>
	<form onsubmit="return false" onkeydown="if(event.keyCode==13)return false;" method="post" data-auto="true"
		  class="form-three"
		  data-csrf="{:systoken('mobile/login/forgetpw_modify')}"
		  action="{:url('mobile/login/forgetpw_modify')}">

				<div class="input-box">
					<span class="iconfont icon-mima"></span>
					<input class="layui-input" required  pattern="^([a-zA-Z0-9]|[._\\~!@#$%^&*()-_=+|{}\[\],.?\/:;\']){6,18}$"
						   name="password" maxlength="32" type="password" autocomplete="off"
						   placeholder="请输入6-18位密码的新密码"
						   error-msg="6-18位字母、数字或符号">
					<div class="isDisplay">
						<span class="iconfont icon-eye1"></span>
						<span class="iconfont icon-eye" style="display: none"></span>
					</div>
				</div>
				<div class="input-box">
					<span class="iconfont icon-mima"></span>
					<input class="layui-input" required
						   name="repassword" maxlength="32" type="password" autocomplete="off"
						   placeholder="确认密码" rule="pdequally"
						   error-msg="两次密码不一致">

				</div>




			<input type="hidden" name="mobile">
			<button type="submit" class="btn-step" data-form-loaded="确认修改">确认修改</button>


	</form>
	<span class="s-login" >已有账号，<a  href="{:url('mobile/login/index')}" >立即登录</a></span>

</div>




{/block}
{block name="script"}
<script>
	$(function (){
		var Height = $('body').height();
		// 回到顶部
		$(window).resize(function () {
			// 回到顶部
			$('body').height(Height);
			// 回到顶部
		});
	})
</script>
<script>
	$(document).ready(function(){
		$(".isDisplay").on("click","span",function(){
			$(this).hide().siblings().show();
			console.log($("[name='password'][type='password']").length)
			$(this)
			if($("[name='password'][type='password']").length){
				$("[name='password'][type='password']").attr("type","text")
			}else{
				$("[name='password'][type='text']").attr("type","password")
			}
		})



		$(".btn-register").on('keydown', function(e) {
			if(e.keyCode == 13) {
				e.preventDefault()
			}
		})
		document.onkeydown = function (e) { // 回车提交表单
			// 兼容FF和IE和Opera
			var theEvent = window.event || e;
			var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
			if (code == 13) {

				$(".btn-register").click();
			}
		}
		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".phone-code").on("click",function(){
			if(phoneFlag){
				var that = this
				//检测手机号码
				var isCheck = checkPhone("phone")
				if(!isCheck){
					return false
				}

				phoneFlag=false;


				$.ajax({
					url: '{:url("index/login/send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":1,
						"verify_type":3
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg("验证码发送成功，请等待~")
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									// code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取验证码");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});

	})
	function forgetOne(res) {

		if (res.code == 1) {
			$("input[name='mobile']").val(res.data.mobile);
			var reg = /^(\d{3})\d{4}(\d{4})$/;
			var mobile = res.data.mobile.replace(reg, "$1****$2");
			$(".mobile").val(mobile);
			$(".login-box").attr("data-tab", "two");

		} else {
			$.msg.error(res.info)
		}
		return false
	}
	function forgetTwo(res) {
		if (res.code == 1) {
			$(".login-box").attr("data-tab", "three");
		} else {
			$.msg.error(res.info)
		}
		return false
	}
	function pdequally(val) {

		if ($("input[name='password']").val() != $("input[name='repassword']").val() || !$("input[name='password']").val() || !$("input[name='repassword']").val()) {
			return "两次密码不一致";
		}
	}

</script>
{/block}
{block  name="style"}
<style>
	.login-box {
		padding: 1rem 1.2rem;
	}
	.login-box .login-button{
		padding-top:0.267rem
	}
	.phone-code{
		position: absolute;
		right: 0.133rem;
		top:0;
		color: #43C6D6;
		font-size: 0.32rem;
		line-height:1.133rem ;


	}
	.btn-step{
		width: 100%;
		height: 1.133rem;
		margin-top: 0.6rem;
		background: #43C6D6;
		border-radius: 0.573rem;
		border:none;
		font-size: 0.427rem;
		color: #FFFFFF;
		line-height: 1.133rem;
	}
	.s-login{

		font-size: 0.32rem;
		color: #999999;

		display: block;
		margin: 0 auto;
		text-align: center;
		line-height:1.067rem;
	}
	.s-login a{
		font-size: 0.32rem;
		color: #43C6D6;
	}
	.login-box form{
		display: none;
	}
	.login-box[data-tab='one'] .form-one {

		display: block;

	}

	.login-box[data-tab='two'] .form-two {

		display: block;

	}
	.login-box[data-tab='three'] .form-three {

		display: block;

	}
</style>
{/block}


